/*
 * 监控区主页的侧边栏
 * 需要依赖 Vue
 * @author Zdream
 * @since 0.2.0
 */

monitor.ui.aside = {
	init : function () {
	    this.beenSelected = this.beenSelected.bind(this);
	    this.subcribe = this.subcribe.bind(this);
	    this.release = this.release.bind(this);

		this.addGeneral();
		
		this.subcribe();
	},
	
	state : {
		/**
		 * 按钮列表. 用于渲染, 保存渲染顺序.
		 * 存放的 id 的列表
		 */
		buttonOrder: [],
	
		/**
		 * 用于快速检索按钮, 以按钮的 id 为键
		 */
		buttons: {},
		
		/**
		 * 选中的那个按钮的 id, 表示哪个按钮被选中了.
		 * 0, 表示选到了【设置】
		 * 1 (默认), 表示选到了【概况】
		 */
		selected: 1
	},
	
	buffer : {
		/*
		 * 分发的 Button ID, 就是个计数器.
		 * 去掉设置 0, 概况 1, 就是从 2 开始
		 */
		idCounter: 2
	},
	
	text : {
		setting: " 设置",
		situation: " 概况"
	},
	
	/**
	 * 侧边栏会处理的消息种类有:
	 * 1. aside-selected-change
	 *    修改 selected 到哪个屏幕、概况等
	 * 2. aside-add-button
	 *    添加屏幕等按钮
	 * 3. aside-remove-button
	 *    删除屏幕等按钮
	 * 4. aside-refresh-button
	 *    全刷新屏幕等按钮. 其中概况不会变
	 */
	subcribe : function() {
		var thiz = this;
		
		monitor.msgCenter.subscribe(
				["aside-selected-change", "aside-add-button", "aside-remove-button", "aside-refresh-button"],
		function(event, argv) {
			switch (event) {
			case "aside-selected-change": {
				thiz.asideSelectedChange(argv);
			} break;
			case "aside-refresh-button": {
				thiz.asideRefreshButton(argv);
			} break;
			case "aside-add-button": {
				thiz.addScreen(argv);
			} break;
			case "aside-remove-button": {
				thiz.removeScreen(argv);
			} break;
			}
		});
	},
	
	/**
	 * 侧边栏会产生的消息种类有:
	 * 1. 点击事件 aside-selected
	 *    点到哪个屏幕、概况等
	 * @param event
	 *    string, 这里必须等于 "aside-selected"
	 * @param argv
	 *    任意类型, 可以为 null
	 */
	release : function(event, argv) {
		monitor.msgCenter.release(event, argv);
	},
	
	/**
	 * 收到事件: aside-selected-change
	 * @param argv
	 *    object, 类型如下:
	 * {
	 *    type: string, 可能是 "screen" "setting" 或 "general"
	 *    sid: string, 屏幕 ID. 当且仅当 type=="screen" 时有效
	 * }
	 */
	asideSelectedChange : function(argv) {
		switch (argv.type) {
		case "screen": {
			var sid = argv.sid;
			var map = this.state.buttons;
			var id = -1;
			
			for (var key in map) {
				var o = map[key];
				if (o.type == "screen" && sid == o.sid) {
					id = key;
					break;
				}
			}
			
			if (id != -1) {
				this.beenSelected(id);
			}
		} break;
		case "general": {
			this.beenSelected(1);
		} break;
		case "setting": {
			this.beenSelected(0);
		} break;
		default: {
			console.log("aside-selected-change");
			console.log(argv);
		} break;
		}
	},
	
	/**
	 * 收到事件: aside-refresh-button.
	 * 现在这里只处理屏幕数据
	 * @param array
	 *    Array, 每个元素的类型如下:
	 * {
	 *    sid: string, 屏幕 ID.
	 *    ...
	 * }
	 */
	asideRefreshButton : function(array) {
		this.clearButtons();
		
		var len = array.length;
		for (var i = 0; i < len; i++) {
			this.addScreen(array[i]);
		}
	},
	
	/**
	 * 添加设置栏、概况栏
	 */
	addGeneral : function() {
		var array = this.state.buttonOrder;
		var map = this.state.buttons;
		
		array.push(0);
		map[0] = {
			type: "setting",
			id: 0
		};
		
		array.push(1);
		map[1] = {
			type: "general",
			id: 0
		};
		
		Vue.set(this.vm, "buttonOrder", array);
		Vue.set(this.vm, "buttons", map);
		
		this.afterUpdateButtons();
	},
	
	/**
	 * 添加 screen
	 * @param screen
	 *   Object
	 *   {
	 *      sid: string, uuid
	 *   }
	 */
	addScreen : function(screen) {
		var array = this.state.buttonOrder;
		var map = this.state.buttons;
		var id = this.buffer.idCounter++;
		
		array.push(id);
		map[id] = {
			type: "screen",
			sid: screen.sid,
			id: id
		};
		
		Vue.set(this.vm, "buttonOrder", array);
		Vue.set(this.vm, "buttons", map);
		
		this.afterUpdateButtons();
	},
	
	/**
	 * 删除 screen
	 * @param screen
	 *   Object
	 *   {
	 *      sid: string, uuid
	 *   }
	 */
	removeScreen : function(screen) {
		var array = this.state.buttonOrder;
		var map = this.state.buttons;
		var id = -1;
		var sid = screen.sid;
		
		for (var key in map) {
			if (map[key].sid == sid) {
				id = key;
				delete map[key];
				break;
			}
		}
		
		for (var i = 0; i < array.length; i++) {
			if (array[i] == id) {
				array.splice(i, 1);
				break;
			}
		}
		
		Vue.set(this.vm, "buttonOrder", array);
		Vue.set(this.vm, "buttons", map);
		
		// 如果当前选中了删除的屏幕, 则跳到概况
		if (id == this.state.selected) {
			this.beenSelected(1);
		}
		
		this.afterUpdateButtons();
	},
	
	/**
	 * 删除所有非 general 部分的 buttons
	 */
	clearButtons : function() {
		var array = this.state.buttonOrder;
		var map = this.state.buttons;
		
		// array 前两个是 setting 和 general, 不清除
		array.splice(2, array.length - 2);
		
		// map
		for (var id in map) {
			if (id > 1) {
				delete map[id];
			}
		}
		
		// 如果当前选中了删除的屏幕(除了 0, 1 以外的所有情况), 则跳到概况 (1)
		if (this.state.selected > 1) {
			this.beenSelected(1);
		}
	},
	
	/**
	 * 更新 state.buttons 之后要做的操作
	 */
	afterUpdateButtons : function() {
		// TODO
	},
	
	buttonSelected : function(id) {
		monitor.ui.aside.beenSelected(id);
	},
	
	/**
	 * 某个按钮被选中了的时候, 调用.
	 */
	beenSelected : function(id) {
		this.state.selected = id;

		// 下面是发全局消息
		var map = this.state.buttons;
		var type = map[id].type;
		
		var o = {
			type: type
		};
		
		switch (type) {
		case "screen": {
			o.sid = map[id].sid;
		} break;
		}
		
		this.release("aside-selected", o);
	}
};

monitor.ui.aside.vm = new Vue({
	data: monitor.ui.aside.state,
	methods: {
		buttonSelected: monitor.ui.aside.buttonSelected
	}
});

monitor.ui.aside.init();

$("#mnt_aside").load('/html/monitor/aside.html', function() {
	monitor.ui.aside.vm.$mount("#mnt_aside");
});
